<template>
  <div class="add-account-allocation">
    <a-modal
      class="loading"
      :visible="visible"
      width="25%"
      :title="title"
      @cancel="handleClose"
      @ok="handleOk"
    >
      <a-form class="form" :model="form" :rules="rules" ref="addFrom">
        <a-form-item label="教师姓名" name="lsxm">
          <a-input v-model:value="form.lsxm" placeholder="请输入教师姓名" />
        </a-form-item>
        <a-form-item label="教师工号" name="lskh">
          <a-input v-model:value="form.lskh" placeholder="请输入教师工号" />
        </a-form-item>
        <a-form-item label="联系方式" name="phone">
          <a-input v-model:value="form.phone" placeholder="请输入联系方式(仅数字)" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, computed, watchEffect, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { saveTeacher } from '/@/api/system-manage/teacher-info';
  import type { Rule } from 'ant-design-vue/es/form';
  const props = defineProps({
    visible: {
      type: Boolean,
    },
    form: {
      type: Object,
      default() {
        return {};
      },
    },
  });

  const form = ref();
  const addFrom = ref();
  watchEffect(() => {
    form.value = JSON.parse(JSON.stringify(props.form));
  });

  // const validateKh = async (_rule: Rule, value: string) => {
  //   const reg = /^[0-9]*$/;
  //   if (value === '') {
  //     return Promise.reject('用户卡号不能为空');
  //   } else if (!reg.test(value)) {
  //     return Promise.reject('用户卡号类型只能为数字');
  //   } else {
  //     return Promise.resolve();
  //   }
  // };

  const validatePhone = async (_rule: Rule, value: string) => {
    const reg = /^1[3456789]\d{9}$/;
    if (value === '') {
      return Promise.reject('联系方式不能为空');
    } else if (!reg.test(value)) {
      return Promise.reject('请输入正确的手机号');
    } else {
      return Promise.resolve();
    }
  };

  const rules = {
    lsxm: [{ required: true, message: '教师姓名不能为空', trigger: 'blur' }],
    lskh: [{ required: true, message: '教师工号不能为空', trigger: 'blur' }],
    // phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
  };

  const title = computed(() => {
    return form.value.userId ? '编辑教师账号' : '编辑教师账号';
  });

  const $emit = defineEmits(['update:visible', 'refresh']);

  const handleClose = () => {
    // form.value.userId = ''
    addFrom.value.resetFields();
    $emit('update:visible', false);
  };

  const handleOk = async () => {
    await addFrom.value.validate();
    saveTeacher(form.value).then((res) => {
      if (res.code == 1) {
        message.success('操作成功');
        $emit('refresh');
        handleClose();
      } else {
        message.error(res.message);
      }
    });
  };

  onMounted(() => {});
</script>
<style lang="less" scoped>
  .form {
    width: 100%;
    padding: 20px 16px 0 16px;
  }
</style>
<style lang="less">
  .loading {
    .ant-modal-header {
      background-color: #3e456b;
    }

    .ant-modal-title,
    .ant-modal-close-icon {
      color: #fff;
    }

    .ant-modal-body {
      padding: 10px !important;
      display: flex;
      height: 100% !important;
    }

    .ant-radio-inner {
      border-radius: 0 !important;
    }
  }
</style>
